<template>
  <div>
    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
      <div class="widget am-cf">
        <div class="widget-head am-cf">
          <div class="widget-title am-fl">退费扣除表</div>
        </div>

        <div class="widget-body  am-fr">
          <div class="am-u-sm-8 am-u-md-8 am-u-lg-2">
            <div class="am-form-group">
              <el-select
                v-model="query.areaTeamId"
                placeholder="请选择地区"
              >
                <el-option
                  v-for="(item, index) in areaTeams"
                  :key="index"
                  :label="item.text"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="am-u-sm-12 am-u-md-12 am-u-lg-2">
            <div class="am-form-group">
              <el-select
                placeholder="业务组"
                v-model="query.busTeamId"
                clearable
              >
                <el-option
                  v-for="(item, index) in busTeams"
                  :key="index"
                  :value="item.busTeamId"
                  :label="item.name"
                ></el-option>
              </el-select>
            </div>
          </div>

          <div class="am-u-sm-12 am-u-md-12 am-u-lg-2">
            <div class="am-form-group">
              <el-select
                v-model="query.periodId"
                placeholder="选择期数"
                clearable
              >
                <el-option
                  v-for="(item, index) in periods"
                  :key="index"
                  :label="item.periodName"
                  :value="item.periodId"
                >
                </el-option>
              </el-select>
            </div>
          </div>

          <div class="am-u-sm-12 am-u-md-12 am-u-lg-2">
            <div class="am-form-group">
              <el-date-picker
                v-model="dateTime"
                type="daterange"
                placeholder="审核时间"
                clearable
              >
              </el-date-picker>
            </div>
          </div>

          <div class="am-u-sm-20 am-u-md-20 am-u-lg-8 am-u-end">
            <div class="am-form-group">
              <button
                @click="handleSearch"
                type="button"
                class="am-btn am-btn-default am-btn-success"
              ><span class="am-icon-search"></span>查询
              </button>
              <button
                @click="exportFile"
                type="button"
                class="am-btn am-btn-default am-btn-success"
              >导出
              </button>
              <button
                @click="lock"
                type="button"
                class="am-btn am-btn-default am-btn-success"
              >锁定
              </button>
              <button
                @click="unlock"
                type="button"
                class="am-btn am-btn-default am-btn-success"
              >解锁
              </button>
            </div>
          </div>
          <div class="am-u-sm-12">
            <el-table
              :data="tableData"
              border
              empty-text="暂无数据"
              stripe
              style="min-width: 100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="55"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                prop="studentName"
                label="学生姓名"
              >
              </el-table-column>
              <el-table-column
                min-width="160"
                prop="className"
                label="班级名称"
              > </el-table-column>
              <el-table-column
                min-width="100"
                prop="gradeName"
                label="年级"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                label="科目"
                prop="subjectName"
              >
              </el-table-column>
              <el-table-column
                min-width="100"
                label="期数"
                prop="periodName"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                prop="areaTeamName"
                label="区域"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                prop="busTeamName"
                label="业务组"
              >
              </el-table-column>
              <el-table-column
                min-width="200"
                prop="payTime"
                label="缴费时间"
              >
                <template scope="scope">
                  <div> {{scope.row.payTime | formatTime }}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="200"
                prop="createTime"
                label="申请时间"
              >
                <template scope="scope">
                  <div> {{scope.row.createTime | formatTime }}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="200"
                prop="auditTime"
                label="审核时间"
              >
                <template scope="scope">
                  <div> {{scope.row.auditTime | formatTime }}</div>
                </template>
              </el-table-column>
              <el-table-column
                min-width="150"
                prop="lectureAmount"
                label="班级总讲次"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                prop="refundLecture"
                label="退费开始讲次"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                prop="bonusSeniorNames"
                label="提成者（班主任）"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                prop="bonusTeacherNames"
                label="提成者（任课老师）"
              >
              </el-table-column>
              <el-table-column
                min-width="150"
                prop="bonusPersonLock"
                label="状态"
              >
                <template scope="scope">
                  <div> {{scope.row.bonusPersonLock == 1 ? '锁定' : '未锁定' }}</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="am-u-lg-12 am-cf">
          <div class="am-fr">
            <pagination
              v-bind:total="total"
              v-bind:pageNo="pageNo"
              v-bind:pageSize="pageSize"
              isShowPageSize
              @pageSizeChange="sizeChange"
              @paging="loadTableData"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import io from '../../lib/io'
import Pagination from '../base/Pagination.vue'
import moment from 'moment'
import upload from '../base/upload'
import Clipboard from 'clipboard'
import conf from '../../lib/conf'
export default {
  data: function() {
    return {
      total: 0,
      pageSize: 10,
      pageNo: 1,
      tableData: [{}],
      viewSchoolList: [],
      showSchoolList: [],
      totalSession: [],
      schoolInputData: [],
      isShowSchoolInputData: [],
      currentActId: '',
      periods: [],
      dateTime: [],
      studentRefundIds: '',
      studentRefundIdsArr: [],
      query: {
        areaTeamId: '',
        busTeamId: '',
        periodId: '',
        startAuditTime: '',
        endAuditTime: ''
      }
    }
  },
  components: {
    Pagination
  },
  watch: {
    'query.areaTeamId': function(newValue, oldValue) {
      if (oldValue) {
        this.query.busTeamId = ''
        this.query.periodId = ''
      }
      if (!oldValue) {
        this.loadTableData()
      }
      this.loadPeriodData()
    }
  },
  computed: {
    areaTeams() {
      let options = (this.$root.config.areaTeams || []).map(item => {
        if (!this.query.areaTeamId) {
          this.query.areaTeamId = item.areaTeamId
        }
        return { value: item.areaTeamId, text: item.name }
      })
      return options
    },
    busTeams() {
      let list = (this.$root.config.busTeams || []).filter((item, index) => {
        if (item.areaTeamId === this.query.areaTeamId) {
          return true
        }
        return false
      })
      return list
    }
  },
  mounted() {},
  methods: {
    handleSelectionChange(selection) {
      this.studentRefundIdsArr = selection
    },
    lock() {
      let studentRefundIds = []
      this.studentRefundIdsArr.forEach(item => {
        studentRefundIds.push(item.studentRefundId)
      })
      io.post(
        io.lockBonusPerson,
        {
          studentRefundIds: studentRefundIds.join(',')
        },
        ret => {
          if (ret.success) {
            this.loadTableData(1)
          } else {
            this.$alert(ret.desc)
          }
        }
      )
    },
    unlock() {
      let studentRefundIds = []
      this.studentRefundIdsArr.forEach(item => {
        studentRefundIds.push(item.studentRefundId)
      })
      io.post(
        io.unlockBonusPerson,
        {
          studentRefundIds: studentRefundIds.join(',')
        },
        ret => {
          if (ret.success) {
            this.loadTableData(1)
          } else {
            this.$alert(ret.desc)
          }
        }
      )
    },
    loadPeriodData() {
      io.post(
        io.apiAdminPeriodListForAreaTeam,
        {
          areaTeamId: this.query.areaTeamId
        },
        ret => {
          if (ret.success) {
            this.periods = ret.data
          } else {
            this.$alert(ret.desc)
          }
        }
      )
    },
    handleSearch() {
      this.loadTableData(1)
    },
    sizeChange(val) {
      this.pageSize = val
    },
    exportFile() {
      if (!this.query.periodId) {
        this.$alert('请选择期数')
        return
      }
      io.downloadFile(
        io.exportStudentRefundBonusPerson,
        this.formatData(this.query),
        ret => {
          if (ret.success) {
          } else {
            this.$alert(ret.desc)
          }
        }
      )
    },
    loadTableData(pageNo) {
      this.pageNo = pageNo || this.pageNo || 1
      this.$showLoading()
      io.post(
        io.findStudentRefundBonusPersonPage,
        Object.assign({}, this.formatData(this.query), {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }),
        ret => {
          this.$hiddenLoading()
          if (ret.success) {
            this.tableData = ret.data.list
            this.total = ret.data.total
          } else {
            this.$alert(ret.desc)
          }
        }
      )
    },
    formatData(data) {
      return {
        areaTeamId: data.areaTeamId,
        busTeamId: data.busTeamId,
        periodId: data.periodId,
        startAuditTime:
          this.dateTime.length > 0 && this.dateTime[0]
            ? moment(this.dateTime[0]).format('YYYY-MM-DD')
            : '',
        endAuditTime:
          this.dateTime.length > 0 && this.dateTime[1]
            ? moment(this.dateTime[1]).format('YYYY-MM-DD')
            : ''
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
